<script language="javascript" src="modul/simpanan/ajax.js"></script>
<style type="text/css">
    button {
        margin: 2px; 
        position: relative; 
        padding: 4px 8px 4px 4px; 
        cursor: pointer;   
        list-style: none;
    }
    button span.ui-icon {
        float: left; 
        margin: 0 4px;
    }
    #menu-tombol {
        padding-bottom:10px;
        padding:5px 5px 5px 5px;
        margin-bottom:20px;
    }
    #tombol-tambah{
        float:left;
        width:250px;
    }
    #tombol-cari{
        float:right;
        width:500px;
        text-align:right;
    }
    #tampil_data2,#tampil_data3{
        margin-top:30px;
    }
    
    #info_siswa{
        padding:5px 5px 5px 5px;
        background-color:#FFF;
        width:400px;
        -moz-border-radius: 5px 5px 5px 5px; 
        -webkit-border-radius: 5px 5px 5px 5px; 
        border-radius: 5px 5px 5px 5px;
    }
</style>
<?php
include "inc/inc.koneksi.php";

$id = '';
if (isset($_GET['id'])) {
    $id = $_GET['id'];
}
?>
<div id='dalam_content'>
    <div id="messages"></div>
    <h2>PEMBAYARAN SPP SISWA</h2>
    <div id='tabs'>
        <ul>
            <li><a href='#tabs-1'>Bayar SPP</a></li>
            <li><a href='#tabs-2'>Transaksi Pertanggal</a></li>
            <li><a href='#tabs-3'>Tunggakan</a></li>
        </ul>

        <div id='tabs-1'>
            
            <table width='100%'>
                <tr>
                    <td width='15%'>Nomor Induk</td>
                    <td width='2%'>:</td>
                    <td><input type='text' id='nomor' size='25' class='input' value='<?php echo $id ?>' /></td>
                    <td rowspan="4"><div id='info_siswa'></div></td>
                </tr>
                <tr>
                    <td width='15%'>Tanggal</td>
                    <td width='2%'>:</td>
                    <td><input type='tgl' id='tgl' size='12' class='input'></td>
                </tr>
                <tr>
                    <td width='15%'>Jenis SPP</td>
                    <td width='2%'>:</td>
                    <td>
                        <select name='jenis' id='jenis' class='input'>
                            <option value=''>-Pilih-</option>
                            <?php
                            $sql = "SELECT * FROM bulan";
                            $query = mysql_query($sql);
                            while ($rows = mysql_fetch_array($query)) {
                                echo "<option value='$rows[id_bulan]'>$rows[id_bulan] - $rows[nama_bulan]</option>";
                            }
                            ?>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width='15%'>Jumlah</td>
                    <td width='2%'>:</td>
                    <td>
                        <input type='text' name='jml' id='jml' size='15' class='input' />
                        <button class='ui-state-default ui-corner-all' id='btnUpdate'>Update</button>
                    </td>
                </tr>
                <tr></tr>
                <tr>
                    <td colspan='4' align='center'>
                        <button class='ui-state-default ui-corner-all' id='simpan'>
                            <span class='ui-icon ui-icon-disk'></span>Simpan
                        </button>
                        <button class='ui-state-default ui-corner-all' id='baru'>
                            <span class='ui-icon ui-icon-document'></span>Baru
                        </button>
                    </td>
                </tr>
            </table>

            <div id='tampil_data1'></div>
        </div>

        <div id='tabs-2'>
            <div id='menu-tombol'>
                <div id='tombol-cari'>
                    Tanggal <input type='text' id='tgl1' size='12'> s/d <input type='text' id='tgl2' size='12'>
                    <button class='ui-state-default ui-corner-all' id='cari2'>
                        <span class='ui-icon ui-icon-search'></span>Cari
                    </button>
                </div>
            </div>
            <div id='tampil_data2'></div>
        </div>


        <div id='tabs-3'>
            <div id='menu-tombol'>
                <div id='tombol-cari'>
                    <select style="width:100px" id="comboTa" ></select>
                    <button class='ui-state-default ui-corner-all' id='cari3'>
                        <span class='ui-icon ui-icon-search'></span>OK
                    </button>
                </div>
            </div>
            <div id='tampil_data3'></div>
        </div>

    </div>
</div>
